import { Box, Text, VerticalStack } from "@shopify/polaris"

function ReportRecommendations({ title, sno, itemsList }) {
    return (
            <Box id="akto-recommendations" paddingBlockStart={6} paddingBlockEnd={8} paddingInlineStart={5} paddingInlineEnd={5}>
                <VerticalStack gap="3">
                    <Text variant="headingLg">{sno}. {title}</Text>
                    {itemsList.map((item, index) => {
                        return (
                            <Box key={index}>
                                <Text variant='bodySm'> <b>{index + 1}. {item.title}: </b>{item.content}</Text>
                            </Box>
                        )
                    })}
                </VerticalStack>
            </Box>
    )
}

export default ReportRecommendations